<template>
  <div class="products">
    <div class="page-header">
      <h2>商品管理</h2>
      <button class="btn" @click="showAddProduct = true">添加商品</button>
    </div>

    <div class="card">
      <table class="table">
        <thead>
          <tr>
            <th>ID</th>
            <th>商品名称</th>
            <th>分类</th>
            <th>价格</th>
            <th>库存</th>
            <th>状态</th>
            <th>创建时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="product in products" :key="product.id">
            <td>{{ product.id }}</td>
            <td>{{ product.name }}</td>
            <td>{{ product.category }}</td>
            <td>¥{{ product.price }}</td>
            <td>{{ product.stock }}</td>
            <td>
              <span :class="['status', product.status]">
                {{ product.status === 'active' ? '上架' : '下架' }}
              </span>
            </td>
            <td>{{ product.createdAt }}</td>
            <td>
              <button class="btn" @click="editProduct(product)">编辑</button>
              <button class="btn btn-danger" @click="deleteProduct(product.id)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 添加/编辑商品弹窗 -->
    <div v-if="showAddProduct || editingProduct" class="modal-overlay" @click="closeModal">
      <div class="modal" @click.stop>
        <h3>{{ editingProduct ? '编辑商品' : '添加商品' }}</h3>
        <form @submit.prevent="saveProduct">
          <div class="form-group">
            <label>商品名称</label>
            <input 
              type="text" 
              class="form-control" 
              v-model="productForm.name" 
              required
            />
          </div>
          <div class="form-group">
            <label>分类</label>
            <select class="form-control" v-model="productForm.category" required>
              <option value="">请选择分类</option>
              <option value="电子产品">电子产品</option>
              <option value="服装">服装</option>
              <option value="食品">食品</option>
              <option value="家居">家居</option>
            </select>
          </div>
          <div class="form-group">
            <label>价格</label>
            <input 
              type="number" 
              class="form-control" 
              v-model="productForm.price" 
              min="0"
              step="0.01"
              required
            />
          </div>
          <div class="form-group">
            <label>库存</label>
            <input 
              type="number" 
              class="form-control" 
              v-model="productForm.stock" 
              min="0"
              required
            />
          </div>
          <div class="form-group">
            <label>状态</label>
            <select class="form-control" v-model="productForm.status">
              <option value="active">上架</option>
              <option value="inactive">下架</option>
            </select>
          </div>
          <div class="form-group">
            <label>商品描述</label>
            <textarea 
              class="form-control" 
              v-model="productForm.description"
              rows="3"
            ></textarea>
          </div>
          <div class="form-actions">
            <button type="button" class="btn" @click="closeModal">取消</button>
            <button type="submit" class="btn">保存</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Products',
  data() {
    return {
      products: [
        {
          id: 1,
          name: 'iPhone 15 Pro',
          category: '电子产品',
          price: 7999.00,
          stock: 50,
          status: 'active',
          description: '最新款iPhone，搭载A17 Pro芯片',
          createdAt: '2023-10-15'
        },
        {
          id: 2,
          name: 'MacBook Air M2',
          category: '电子产品',
          price: 8999.00,
          stock: 30,
          status: 'active',
          description: '轻薄便携的笔记本电脑',
          createdAt: '2023-09-20'
        },
        {
          id: 3,
          name: 'Nike运动鞋',
          category: '服装',
          price: 599.00,
          stock: 100,
          status: 'active',
          description: '舒适透气的运动鞋',
          createdAt: '2023-08-10'
        }
      ],
      showAddProduct: false,
      editingProduct: null,
      productForm: {
        name: '',
        category: '',
        price: '',
        stock: '',
        status: 'active',
        description: ''
      }
    }
  },
  methods: {
    editProduct(product) {
      this.editingProduct = product
      this.productForm = { ...product }
    },
    deleteProduct(id) {
      if (confirm('确定要删除这个商品吗？')) {
        this.products = this.products.filter(product => product.id !== id)
      }
    },
    saveProduct() {
      if (this.editingProduct) {
        // 编辑商品
        const index = this.products.findIndex(p => p.id === this.editingProduct.id)
        this.products[index] = { ...this.editingProduct, ...this.productForm }
      } else {
        // 添加商品
        const newProduct = {
          id: this.products.length + 1,
          ...this.productForm,
          createdAt: new Date().toISOString().split('T')[0]
        }
        this.products.push(newProduct)
      }
      this.closeModal()
    },
    closeModal() {
      this.showAddProduct = false
      this.editingProduct = null
      this.productForm = {
        name: '',
        category: '',
        price: '',
        stock: '',
        status: 'active',
        description: ''
      }
    }
  }
}
</script>

<style scoped>
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
  color: #2c3e50;
}

.status {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.status.active {
  background: #d4edda;
  color: #155724;
}

.status.inactive {
  background: #f8d7da;
  color: #721c24;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal {
  background: white;
  padding: 30px;
  border-radius: 8px;
  width: 500px;
  max-width: 90vw;
  max-height: 90vh;
  overflow-y: auto;
}

.modal h3 {
  margin-bottom: 20px;
  color: #2c3e50;
}

.form-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
}
</style> 